{% extends 'base.html' %}
{% load widget_tweaks %}


{% block html_title %}
    Review Modify
{% endblock %}


{% block html_body_nav_ol %}

    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'review:index' %}">Review</a></li>
    <li class="breadcrumb-item"><a href="{% url 'review:list' %}">List</a></li>
    <li class="breadcrumb-item active" aria-current="page">Create</li>

{% endblock %}


{% block html_body %}

    <form id="id-form-review-public" enctype="multipart/form-data" method="post">{% csrf_token %}

        {% if form.non_field_errors %}
            <div class="alert alert-warning alert-dismissible fade show mt-2" role="alert">
                <ul>
                    {% for error in form.non_field_errors %}
                        <li>{{ error|escape }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        <div class="row mt-3">
            <div class="col-auto">
                {{ form.final_patch.errors }}
                <div class="mb-2 font-weight-bold text-black-50">
                    Current patch: <a
                        href="{{ form.final_patch.value }}">{{ form.final_patch.value }}</a><br>
                </div>
                <div class="input-group">
                    <div class="custom-file">
                        <input name="form-{{ forloop.counter0 }}-final_patch" type="file"
                               class="custom-file-input" id="{{ form.final_patch.id_for_label }}">
                        <label class="custom-file-label" for="{{ form.final_patch.id_for_label }}">
                            Change patch
                        </label>
                    </div>
                </div>
                <script>
                    $('#{{ form.final_patch.id_for_label }}').on('change', function () {
                        //get the file name
                        var fileName = $(this).val();
                        //replace the "Choose a file" label
                        $(this).next('.custom-file-label').html(fileName);
                    })
                </script>
            </div>
        </div>

        <div class="row mt-3 font-weight-bold text-black-50">
            <div class="container">
                {{ form.review_summary.errors }}
                <label class="font-weight-bold text-black-50"
                       for="id_review_summary">Summary:</label>
                <input type="text" name="review_summary"
                       id="id_review_summary"
                       value="{{ form.review_summary.value }}"
                       maxlength="200" class="form-control">
            </div>
        </div>

        <div class="row mt-3 font-weight-bold text-black-50">
            <div class="col-8">
                <div class="mb-3">
                    {{ form.review_description.errors }}
                    <label class="form-label" for="id_review_description">Description:</label>
                    <textarea class="form-control" name="review_description" id="id_review_description"
                              maxlength="2000">{{ form.review_description.value }}</textarea>
                </div>


                <div class="mb-3">
                    {{ form.review_testing_done.errors }}
                    <label class="form-label" for="id_review_testing_done">Testing Done:</label>
                    <textarea class="form-control" name="review_testing_done" id="id_review_testing_done"
                              maxlength="2000" rows="5">{{ form.review_testing_done.value }}</textarea>
                </div>

                <div class="mb-3">
                    {{ form.review_change_description.errors }}
                    <label for="id_review_change_description">Change Description:</label>
                    <textarea class="form-control" name="review_change_description" rows="3" required
                              id="id_review_change_description">{{ form.review_change_description.value }}</textarea>
                </div>


            </div>
            <div class="col-4">

                <div class="mb-3">
                    {{ form.review_branch.errors }}
                    <label class="form-label" for="id_review_branch">Branch:</label>
                    <input type="text" name="review_branch" id="id_review_branch"
                           value="{{ form.review_branch.value }}"
                           maxlength="100" class="form-control">
                </div>

                <div class="mb-3">
                    {{ form.review_branch.errors }}
                    <label class="font-weight-bold text-black-50"
                           for="{{ form.bugs.id_for_label }}">Bugs:</label>
                    {% render_field form.bugs class+='form-control' %}
                </div>

                <div class="mb-3">
                    {{ form.review_target_people.errors }}
                    <label class="form-label"
                           for="id_review_target_people">People:</label>
                    <input class="form-control" type="text" name="review_target_people"
                           id="id_review_target_people"
                           value="{{ form.review_target_people.value }}"
                           maxlength="100">
                </div>

                <div class="mb-3">
                    {{ form.review_target_groups.errors }}
                    <label for="id_review_target_groups">Groups:</label>
                    <input class="form-control" type="text" name="review_target_groups"
                           id="id_review_target_groups"
                           value="{{ form.review_target_groups.value }}"
                           maxlength="100">
                </div>


                <div class="row justify-content-end flex-nowrap mt-5">
                    <div class="col-auto nowrap pr-1">
                        <input class="btn btn-info " type="button" id="id-btn-public" value="Public">
                    </div>
                    <div class="col-auto nowrap pl-1">
                        <input class="btn btn-secondary" type="button" id="id-btn-draft" value="Draft">
                    </div>
                </div>
            </div>

            {{ form.user.errors }}
            {{ form.review_id.errors }}
            {{ form.pubic.errors }}
            <input type="hidden" name="user" value="{{ form.user.value }}" id="id_user">
            <input type="hidden" name="review_id" value="{{ form.review_id.value }}" id="id_review_id">
            <input type="hidden" name="public" value="True" id="id_public">
            <input type="hidden" name="need_public" class="class-hidden-need-public" id="id_need_public">
        </div>

    </form>

{% endblock %}


{% block javascript %}

    <script>
        $('#id-btn-public').on('click', function () {
            $('.class-hidden-need-public').val(1)
            $('#id-form-review-public').submit()
        })
        $('#id-btn-draft').on('click', function () {
            $('.class-hidden-need-public').val(0)
            $('#id-form-review-public').submit()
        })
    </script>

{% endblock %}
